<template>
  <div class="head" :style="{background:bgcolor,color:Color}">
    <div class="left" v-show="leftShow" @touchend="back()">
      <yd-icon name="back" slot="icon" custom size="20px"></yd-icon>
    </div>
    <div class="title" >{{title}}</div>
    <div class="right" v-show="rightShow">
      <yd-icon :name="rightname" slot="icon" custom size="20px"></yd-icon>
    </div>
  </div>
</template>
<script>
  import {Icons} from 'vue-ydui/dist/lib.rem/icons'

  export default {
    components:{
      'yd-icon':Icons
    },
    data(){
      return {
        leftShow:true,
        rightShow:false,
        bgcolor:'#fff',
        rightname:'next',
        Color:'black'
      }
    },
    methods:{
      back(){
        this.$router.back(-1)
      }
    },
    props:['title','bgColor','color'],
    created(){
      if(this.bgColor!==undefined){
        this.bgcolor = this.bgColor
      }
      if(this.color!==undefined){
        this.Color = this.color
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "~less/base";
  .head{
    line-height: 1.2rem;
    height: 1.2rem;
    position: fixed;
    z-index: 40;
    background: white;
    top:0;
    width: 100%;
    border-bottom: 1px solid #cfcfcf;
    .left{
      /*float: left;*/
      position: absolute;
      left: 0.3rem;
    }
    .right{
      /*float: right;*/
      position: absolute;
      right: 0.3rem;
    }
    .title{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-size: 16px;
    }
  }
</style>
